<template>
    <div class="shadow"  draggable=false  v-bind:style="{ 'background-color': getDetail.background }">
      <p contenteditable="false"
      v-bind:style="{ 'font-size': getDetail.fontSize + 'px',
      'font-family': getDetail.fontFamily,
      'font-weight': getDetail.fontWeight,
      'text-shadow': textShadow,
      'color':  getDetail.color,
      'text-align': getDetail.textAlign
      }" @input="handleInput">{{text}}</p>
    </div>
</template>

<script>

export default {
  name: 'app',
  mounted () {
  },
  props: ['getDetail'],
  computed: {
    textShadow () {
        return `${this.getDetail.textShadow1W}px ${this.getDetail.textShadow1W}px ${this.getDetail.textShadow1B}px ${this.getDetail.textShadow1C},${this.getDetail.textShadow2W}px ${this.getDetail.textShadow2W}px ${this.getDetail.textShadow2B}px ${this.getDetail.textShadow2C}`
    },
    text () {
        return this.getDetail.text
    }
  },
  methods: {
    handleInput ($event) {
      this.$store.commit('updateDetailText', $event.target.innerText)
    }
  }
}
</script>
<style scoped>
  .shadow {
    box-sizing: border-box;
    cursor:text;
    height:calc(100% - 0px);
    width:calc(100% -0px);
    user-select:text;
    overflow: hidden;
  }
</style>
